﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        *{
            padding:0px;
            margin:0px;
            list-style:none;
        }
        .ProductIntroduction {
            position: relative;
            width: 1070px;
            margin: 40px auto;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0px 0px 25px #ccc;
        }
        .ProductExhibition_wrap {
            position: relative;
            width: 853px;
            height: 622px;
        }
        .ProductExhibition_box {
            position: absolute;
            height: 120000px;
            transition: all .5s;
            /*transform: translate3d(0px, 0px, 0px);*/
            transform: translateY();
        }
        .ProductExhibition_box1 {
            transition: all .2s linear;
            position: absolute;
            right: 0px;
            top: 0px;
        }
            .ProductExhibition_box .Exhibition_Img img {
                width: 100%;
                height: 622px;
                box-sizing: border-box;
                padding: 15px;
                border-radius: 20px;
            }
        .Exhibition_item {
            margin-right: 15px;
            height: 125px;
        }
       /* .Exhibition_items {
            border: 2px solid #ff0000;
            margin:15px;
            margin-bottom:20px;
            margin-right:30px;
        }*/
        /*.Exhibition_items img {
            width: 159px;
            height: 85px;
            border-radius: 6px;
            vertical-align: top;
            box-sizing: border-box;
            
        }*/
        .Exhibition_item img {
            width: 193px;
            height: 119px;
            border-radius: 6px;
            vertical-align: top;
            box-sizing: border-box;
            padding: 15px;
            opacity:0.5;
        }
        .ProductIntroduction > span {
            position: absolute;
            right: 9%;
            padding: 10px;
            width:10px;
            height:10px;
            line-height:10px;
            text-align:center;
            font-size:12px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.361);
            border-radius: 15px;
            z-index: 10;
        }
        .prev {
            top: -40px;
            transition: all .2s linear;
        }

        .next {
            bottom: -40px;
            transition: all .2s linear;
        }

        .border {
            width: 159px;
            height: 85px;
            border: 4px solid #000;
            position: absolute;
            top: 12px;
            right: 30px;
            transition: all .2s linear;
            /*transform: translate3d(0px, 0px, 0px);*/
            transform: translateY(125px);
        }

            .border > span {
                position: absolute;
                width: 0;
                height: 0;
                border: 10px solid #000;
                border-color: transparent;
                border-right-color: #000;
                left: -20px;
                top: 32px;
            }

       
    </style>

</head>
<body>
    <div class="ProductIntroduction">
        <span class="prev">上</span>
        <div class="ProductExhibition_wrap">
            <div class="ProductExhibition_box">
                <ul>
                    <li class="Exhibition_Img"><img src="img/t1.png" alt="Alternate Text" /></li>
                    <li class="Exhibition_Img"><img src="img/t2.png" alt="Alternate Text" /></li>
                    <li class="Exhibition_Img"><img src="img/t3.png" alt="Alternate Text" /></li>
                    <li class="Exhibition_Img"><img src="img/t4.png" alt="Alternate Text" /></li>
                    <li class="Exhibition_Img"><img src="img/t5.png" alt="Alternate Text" /></li>
                </ul>
            </div>
        </div>
        <div class="ProductExhibition_box1">

            <ul>
                <li class="Exhibition_item"><img src="img/t1.png" alt="Alternate Text" /></li>
                <li class="Exhibition_item"><img src="img/t1.png" alt="Alternate Text" /></li>
                <li class="Exhibition_item"><img src="img/t1.png" alt="Alternate Text" /></li>
                <li class="Exhibition_item"><img src="img/t1.png" alt="Alternate Text" /></li>
                <li class="Exhibition_item"><img src="img/t1.png" alt="Alternate Text" /></li>
                <li class="Exhibition_item"><img src="img/t1.png" alt="Alternate Text" /></li>
                <li class="Exhibition_item"><img src="img/t1.png" alt="Alternate Text" /></li>
            </ul>

            <div class="border">
                <span></span>
            </div>
        </div>
        <span class="next">下</span>
    </div>
    <script>
        //var str = "https://www.jq22.com/demo/jqueryhdlbt202103282156/img/t";
        //let str1 = ``;
        //let lis = document.querySelectorAll(`.Exhibition_item`)
        //for (var i = 1; i < 6; i++) {
        //    var url = `${str}${i}.png`;
        //    console.log(url);
        //    console.log(lis[i - 1].firstElementChild);
        //    lis[i - 1].firstElementChild.src = `url`;
        //}
        let lis = document.querySelectorAll('.Exhibition_item');
        let lis1 = document.querySelector('.ProductExhibition_box')
        let bor = document.querySelector('.border')
        let pro = document.querySelector(`.ProductIntroduction`)

        let unm = 0;
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].firstElementChild.style.opacity = (`0.5`);
                }
                this.firstElementChild.style.opacity = (`1`);
                lis1.style.transform = `translateY(${-626 * i}px)`;
                bor.style.transform = `translateY(${125 * i}px)`;
             }
        }
        bor.parentElement.onmouseenter = function () {
            if (unm==0) {
                pro.firstElementChild.style.top = `-40px`;
                pro.lastElementChild.style.bottom = `0px`;
               
            } else if (unm == 2) {
                pro.firstElementChild.style.top = `0px`;
                pro.lastElementChild.style.bottom = `-40px`;
            } else {
                pro.firstElementChild.style.top = `0px`;
                pro.lastElementChild.style.bottom = `0px`;
            }
           
        }
        bor.parentElement.onmouseleave = function () {
            pro.firstElementChild.style.top = `-40px`;
            pro.lastElementChild.style.bottom = `-40px`;
        }
        pro.firstElementChild.onmouseenter = function () {
            if (unm == 2) {
                pro.firstElementChild.style.top = `0px`;
                pro.lastElementChild.style.bottom = `-40px`;

            } else {
                pro.firstElementChild.style.top = `0px`;
                pro.lastElementChild.style.bottom = `0px`;
            }
        }
        pro.lastElementChild.onmouseenter = function () {
            if (unm == 0) {
                pro.firstElementChild.style.top = `-40px`;
                pro.lastElementChild.style.bottom = `0px`;

            } else {
                pro.firstElementChild.style.top = `0px`;
                pro.lastElementChild.style.bottom = `0px`;
            }
        }
        pro.lastElementChild.onclick = function () {
            if (unm == 1) {
                pro.lastElementChild.style.bottom = `-40px`;
            }
            unm = unm + 1;
            console.log(unm);
            /*bor.style.transform = `translateY(${125 * i}px)`;*/
            bor.parentElement.style.transform = `translateY(-${125 * unm}px)`;
            
        }
        pro.firstElementChild.onclick = function () {
            if (unm==1) {
                pro.firstElementChild.style.top = `-40px`;
            }
            unm = unm - 1;
            console.log(unm);
            /*bor.style.transform = `translateY(${125 * i}px)`;*/
            bor.parentElement.style.transform = `translateY(-${125 * unm}px)`;

        }
    </script>
</body>
</html>